<template>
	<view>
        <view class="goods-view">
            <view>
                <goods-info
                    :goodsPrice="sku.purchase_price"
                    :goodsName="sku.name"
                    :goodsImg="sku.goods_image"
                    :goodsSpecList="sku.spec_list"
                    :goodsNum="sku.num">
                </goods-info>
            </view>
        </view>
        <view class="u-margin-bottom-20 u-margin-top-20" v-if="serverDatail.gift_list">
            <view class="order-gift-view" >
                <view class="gift-header">
                    <view class="gift-title">
                        <text>赠品列表</text>
                    </view>
                </view>
                <view class="gift-list-view"  v-for="(gift,giftIndex) in serverDatail.gift_list">
                    <view class="gift-img-view">
                        <u-image border-radius="10" width="120rpx" height="120rpx" :src="gift.gift_img"></u-image>
                    </view>
                    <view class="gift-info-view">
                        <view class="u-line-2">
                             {{gift.gift_name}}
                        </view>
                    </view>
                    <view class="gift-price-view">
                        <custom-price :price="gift.gift_price" :fontWeight="600" size="30" ></custom-price>
                    </view>
                </view>
            </view>
        </view>
        <view class="type-view">
            <view class="type-item u-flex u-row-between" @click="onType(1)" v-if="allowReturnGoods" >
                <view class="u-flex">
                    <u-image width="38rpx" height="38rpx" src="/static/images/after-money.png"></u-image>
                    <view class="title">退货</view>
                </view>
                <view class="sub-text">
                    <text>退回收到的商品</text>
                    <u-icon name="arrow-right" :size="27"></u-icon>
                </view>
            </view>
            <u-line></u-line>
            <view class="type-item u-flex u-row-between" @click="onType(2)">
                <view class="u-flex">
                    <u-image width="38rpx" height="38rpx" src="/static/images/after-money.png"></u-image>
                    <view class="title">换货</view>
                </view>
                <view class="sub-text">
                    <text>更换收到的商品</text>
                    <u-icon name="arrow-right" :size="27"></u-icon>
                </view>
            </view>
            <u-line></u-line>
            <view class="type-item u-flex u-row-between" @click="onType(3)">
                <view class="u-flex">
                    <u-image width="38rpx" height="38rpx" src="/static/images/after-money.png"></u-image>
                    <view class="title">补发</view>
                </view>
                <view class="sub-text">
                    <text>商家少发商品</text>
                    <u-icon name="arrow-right" :size="27"></u-icon>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	import * as API_AfterSale from '@/api/after-sale.js'

	export default {
		data() {
			return {
                sku: {},
                sn: '',
				allowReturnGoods: true,
                serverDatail: {}
			};
		},
        onLoad(options) {
            this.sku = JSON.parse(decodeURIComponent(options.sku));
            this.sn = options.sn;
            this.loadData();
        },
        methods: {
            onType(type){
                uni.navigateTo({
                    url: `/order-module/order/after-sale/after-sale-apply?sn=${this.sn}&type=${type}&sku=${encodeURIComponent(JSON.stringify(this.sku))}`
                })
            },
			loadData(){
				//读取信息
				API_AfterSale.getAfterSaleData(this.sn,this.sku.sku_id).then(res => {
                    this.serverDatail = res
				    this.allowReturnGoods = res.allow_return_goods
				})
			},
        }
	}
</script>

<style lang="scss">
    .goods-view {
        background-color: #FFFFFF;
        padding: 20rpx;
        border-radius: 0rpx 0rpx 10rpx 10rpx;
    }
    .type-view {
        border-radius: 10rpx;
        background-color: #FFFFFF;
        margin: 20rpx;
        .type-item {
            height: 100rpx;
            padding: 0rpx 20rpx;
            .title {
                font-size: 30rpx;
                font-weight: 600;
                margin-left: 10rpx;
            }
            .sub-text {
                font-size: 25rpx;
                color: #909399;
            }
        }
    }
    .order-gift-view {
        background-color: #FFFFFF;
        border-radius: 10rpx;
        .gift-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 20rpx;
            .gift-title {
                font-size: 33rpx;
                font-weight: bold;
            }
        }
        .gift-list-view {
            padding: 0rpx 20rpx;
            padding-bottom: 10rpx;
            display: flex;
            flex-direction: row;
            line-height: 120rpx;
            .gift-img-view {
                position: relative;
            }
        }
        .gift-info-view {
            margin: 0rpx 20rpx;
            flex: 1;
            .gift-coupon-price{
                color: #f42424;
            }
        }
        .gift-price-view {
            text-align: right;
            .goods-price {
                font-weight: bold;
            }
        }
    }
</style>
